<template>
	<div class="content">
		<div class="main">
			<!-- 第一个表格科室属性 -->
			<div class="mainOne">
				<div class="header">
					<div><span style="font-size: 12px;color: #fff;">科室属性</span></div>
					<div><el-button v-for="(v,i) in headerBtn" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="mini" @click="handClick(i)">{{ v.title }}</el-button></div>
				</div>
				<el-table :data="tableData" border>
					<el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop" :label="col.name" :width="columnWidth(col, tableData)"></el-table-column>
					<!-- fixed -->
					<el-table-column fixed="left" label="行号" type="index" width="50"></el-table-column>
					<!-- edit -->
					<el-table-column fixed="right" label="操作" width="88">
					  <template slot-scope="scope">
						  <div class="editbox" style="text-align: center;">
							<el-button type="text" @click="editFormValue(scope.row)" size="mini">编辑</el-button>
							<el-button type="text" @click="handleDelete(scope.$index, scope.row)" size="mini">删除</el-button>
						  </div>
					  </template>
					</el-table-column>
				</el-table>
			</div>

		</div>
		<div class="feet">
			<!-- 科室属性model -->
			<addksFileTabledept ref="addksFileTabledept" @addksData="addksData"></addksFileTabledept>
			<editksFileTabledept ref="editksFileTabledept" @editksData="editksData"></editksFileTabledept>
		</div>
	</div>
</template>

<script>
	// selfs / sons
	import addksFileTabledept from './addksFileTabledept.vue'
	import editksFileTabledept from './editksFileTabledept.vue'
	// 接口
	import { getDeptAttribute  } from "@/api/ks/ks.js";
	export default {
		props:{
			deptId: {
				type: Number,
			},
		},
		components: {
			addksFileTabledept,editksFileTabledept
		},
		data() {
			return {
				loading:false,
				// title右侧按钮
				headerBtn:[{ add:"add", title:"", type:"text", icon:"el-icon-plus" },{ adit:"adit", title:"", type:"text", icon:"el-icon-edit" }, { del:"del", title:"", type:"text", icon:"el-icon-delete" }],
				tableData:[],
				tableRowsI:[{ name:"员工属性", prop:"id", type:"" }],
				tableRows:[{ name:"科室属性", prop:"attributeName", type:"" },{ name:"适用急诊否", prop:"applyEmergency", type:"" },{ name:"适用门诊否", prop:"applyOutpatient", type:"" },
				{ name:"适用挂号否", prop:"applyRegister", type:"" },{ name:"适用住院否", prop:"applyHospital", type:"" }
				],
				addSonData:{},
				editSonData:{},
			}
		},
		mounted() {
			this.loadData();
		},
		methods: {
			async loadData(){
				let res = await getDeptAttribute({
					deptId:this.deptId
				})
				this.tableData = res.data
			},
			// 步骤
			handClick(i) {
				// i event
				switch (i) {
					case 0:
						// 处理索引0的逻辑 打开隶属科室model
						this.$refs.addksFileTabledept.openModel()
						break;
					case 1:
						// 处理索引1的逻辑
						this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						break;
					case 2:
						// 处理索引2的逻辑 => 新增
						console.log('2')
						break;
				}
			},
			handleDelete(index){
				this.tableData.splice(index, 1);
				console.log(this.tableData);
				this.sonData = this.tableData
				if(this.sonData != {} || this.tableData != []){
					this.$emit('sonData',this.sonData)
				}
			},
			editFormValue(row){
				// 处理索引0的逻辑 打开隶属科室model 开始编辑
				this.$refs.editksFileTabledept.openModel(row)
			},
			// col 里面包含了表头字段和名称，list 是表格数据
			columnWidth(col, list) {
			  let prop = col.prop,lab = col.lab;
			  let width = 40; // 设定一个最小值
			  let maxlenStr = ""; // 最长字符串
			  for (let info of list) {
				if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
			  }
			  width = Math.max(width, len(lab), len(maxlenStr));
			  // 表格自带的内边距(20px) 自调
			  return width + 2; // 这里加了 12px
			  function len(str) {
				// 实际分配长度可根据需要自行调整
				let length = 8;
				for (const char of str + "") {
				  // 英文小写字符 8px
				  if ("a" <= char && char <= "z") length += 8;
				  // 英文大写字符 8px
				  else if ("A" <= char && char <= "Z") length += 8;
				  // 中文字符 28px
				  else if (char >= "\u4e00" && char <= "\u9fa5") length += 18;
				  // 其他 8px
				  else length += 8;
				}
				return length;
			  }
			},
			// 控制科室属性新增model，接收子组件传递过来的值并赋值
			addksData(newVal){
				// console.log(newVal);
				// console.log(newVal,'子组件传过来的添加过后');
				this.tableData.push(JSON.parse(JSON.stringify(newVal)))
				this.sonData = this.tableData
				// console.log(this.sonData,'修改添加过后并赋值的');
				if(this.sonData != {} || this.tableData != []){
					this.$emit('sonData',this.sonData)
				}
			},
			// 控制科室属性编辑model，接收子组件传递过来的值并赋值
			editksData(newVal){
				// console.log(newVal);
				// console.log(newVal,'子组件传过来的修改过后');
				this.tableData.filter(item => item.id !== newVal.id);
				// this.tableData.pop(JSON.parse(JSON.stringify(newVal)))
				this.sonData = this.tableData
				// console.log(this.sonData,'赋值过后并药传递给父组件的');
				if(this.sonData != {} || this.tableData != []){
					this.$emit('sonData',this.sonData)
				}
			},
		},

		//生命周期
		created() {
			
		},
	}
</script>

<style lang="less" scoped>
.content{
	height: 100%;
	width: 100%;
	.header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #007bb0;
		padding: 4px;
	}
	.main{
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.mainOne{
			flex: 1;
			height: 50%;
			border: 1px solid #007bb0;
			
		}
		.mainTwo{
			flex: 1;
			height: 50%;
			margin-top: 12px;
			border: 1px solid #007bb0;
		}
	}
}
</style>